import React, { useEffect, useState } from 'react';
import { Carousel, Button ,List, Card, Table } from 'antd';
import styles from './index.less'
import apis from '@/services';
import { router } from 'umi';


interface State {
  list: any[]
}

const TableList = ({ loading }: { loading: boolean }) => {
  const initState: State = {
    list: []
  };

  const [list, setTableData] = useState(initState.list);

  const getTableDatas = () => {

    apis.analysis.getTabledata()
      .then((response: any) => {
        const tempResult = response?.result;
        if (response.status === 200) {
          setTableData(tempResult)
        }
      });

  }
  const listItem = list?.map((item: any, index: any) => {
   const add0 = (m) => {
      return m < 10 ? '0' + m : m;
  }
   const formatDate = (timeStamp) => {
    let time = new Date(timeStamp),
        m = time.getMonth() + 1,
        d = time.getDate(),
        h = time.getHours(),
        mm = time.getMinutes(),
        s = time.getSeconds();

    return add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
}
   
    return (
      

      <table className={styles.tableIn}>
        <tr>
          <td className={styles.tdFrist}>{item.deviceName}</td>
          <td className={styles.tdFourth}>{item.alarmName}</td>
          {item.alarmTime == 0? <td className={styles.tdFourth}>/</td> :
          <td className={styles.tdFourth}>{formatDate(item.alarmTime)}</td>}
        </tr>


      </table>
    );
  });

  const newsListView = [];
  // i个为一组来显示
  for (let i = 0; i < listItem?.length; i += 1) {
    const view = listItem?.slice(i, i + 1);
    let key = 0;
    while (view?.length < 1) {
      view.push(<div className={styles.listItem} key={`j-${key}`} />);
      key += 1;
    }
    newsListView.push(<React.Fragment key={i}>{view}</React.Fragment>);
  }

  useEffect(() => {
    getTableDatas();
},[]);
// let list = [
//     {dev:"设备名称1",norm:24,then:26.8,time:"21.02.01 08:14"},
//     {dev:"设备名称2",norm:33,then:30,time:"21.02.02 09:14"},
//     {dev:"设备名称3",norm:42,then:42,time:"21.02.02 11:14"},
//     {dev:"设备名称4",norm:51,then:38,time:"21.02.02 12:14"},
//     {dev:"设备名称5",norm:"上线",then:26.6,time:"21.0202 14:14"},
//     {dev:"设备名称6",norm:39,then:40,time:"21.02.03 14:14"},
//     {dev:"设备名称7",norm:44,then:45,time:"21.02.03 08:14"},
//     {dev:"设备名称8",norm:36,then:30,time:"21.02.03 12:14"},
//     {dev:"设备名称9",norm:25,then:46,time:"21.02.03 14:14"},
// ];

return(

  <div className={styles.all}>
    <div className={styles.height}></div>
    <div className={styles.cardTitle}>
      <div>
        {/* <strong className={styles.titleColor}>|</strong> */}
        <span className={styles.space}>预警信息</span>
      </div> 
      <Button type="primary" className={styles.buttonclass} onClick={() => {router.push({pathname: '/device/alarm',})}}>
            详情
      </Button>  
    </div>
    <div className={styles.header}>
      <table className={styles.tableHeader}>
        <tr>
          <th className={styles.thFrist}>设备名称</th>
          <th className={styles.thFourth}>告警名称</th>
          <th className={styles.thFourth}>告警时间</th>
        </tr>
      </table>

      <div className={styles.revDoor}>
        <Carousel dotPosition="right" dots={false} autoplay autoplaySpeed={3000}>
          {newsListView}
        </Carousel>
      </div>
    </div>
  </div>

)};

export default TableList;